<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>试卷练习</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iconfont@1.0.0/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f2f3f5;
            padding: 20px;
        }

        #myExam {
            width: 980px;
            margin: 0 auto;
        }

        .title {
            font-size: 22px;
            color: #333;
            font-weight: bold;
            margin: 20px;
            padding-top: 15px;
        }

        .wrapper {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            margin-bottom: 25px;
        }

        .top li:first-child {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .search-li {
            flex: 1;
            margin: 0 15px !important;
        }

        .search-container {
            position: relative;
            max-width: 300px;
            margin-left: auto;
        }

        .search {
            width: 100%;
            height: 40px;
            padding: 0 15px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            transition: all 0.3s;
            font-size: 14px;
            padding-right: 40px;
        }

        .search:focus {
            border-color: #409EFF;
            outline: none;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        .el-icon-search {
            position: absolute;
            right: 12px;
            top: 12px;
            color: #909399;
            cursor: pointer;
        }

        .paper {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 30px;
            min-height: 400px;
        }

        .item {
            width: calc(50% - 13px);
            border-radius: 4px;
            padding: 20px 25px;
            border: 1px solid #eee;
            box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
            transition: all 0.4s ease;
        }

        .item:hover {
            box-shadow: 0 0 8px 3px rgba(140, 193, 248, 0.45);
            transform: translateY(-5px);
            border-color: #c6e2ff;
        }

        .item h4 {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
            cursor: pointer;
            transition: color 0.3s;
        }

        .item h4:hover {
            color: #0195ff;
        }

        .name {
            font-size: 14px;
            color: #88949b;
            margin: 15px 0;
            line-height: 1.6;
        }

        .info {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            font-size: 13px;
            color: #606266;
            margin-top: 20px;
        }

        .info span {
            display: flex;
            align-items: center;
        }

        .info i {
            margin-right: 5px;
            color: #0195ff;
            font-size: 14px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            padding: 20px 0 30px;
        }

        .layui-laypage {
            margin: 0;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .loading-text {
            margin-left: 10px;
            font-size: 16px;
            color: #0195ff;
        }
    </style>
</head>
<body>
<div id="myExam">
    <div class="title">试卷练习</div>
    <div class="wrapper">
        <ul class="top">
            <li>练习列表</li>
            <li class="search-li">
                <div class="search-container">
                    <input type="text" placeholder="试卷名称" class="search" id="searchInput">
                    <i class="el-icon-search layui-icon layui-icon-search" id="searchBtn"></i>
                </div>
            </li>
            <li>
                <button class="layui-btn layui-btn-normal" id="searchBtnMain">搜索试卷</button>
            </li>
        </ul>

        <div style="position: relative;">
            <div class="loading-overlay" id="loadingOverlay">
                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 24px; color: #0195ff;"></i>
                <span class="loading-text">数据加载中...</span>
            </div>

            <ul class="paper" id="paperList">
                <!-- 试卷列表将通过JS动态生成 -->
            </ul>
        </div>

        <div class="pagination" id="pagination"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use(['laypage', 'jquery'], function(){
        var laypage = layui.laypage;
        var $ = layui.$;

        // 模拟试卷数据
        var examData = [
            { id: 1, source: "高等数学期末考试", description: "2023学年第一学期期末考试试卷", examDate: "2023-11-20 09:00:00", totalTime: 120, totalScore: 100 },
            { id: 2, source: "大学英语四级模拟", description: "全国大学生英语四级模拟考试", examDate: "2023-11-18 14:30:00", totalTime: 130, totalScore: 100 },
            { id: 3, source: "程序设计基础", description: "Java程序设计基础能力测试", examDate: "2023-11-15 10:00:00", totalTime: 90, totalScore: 100 },
            { id: 4, source: "数据结构期中考试", description: "数据结构与算法期中测试", examDate: "2023-11-10 08:00:00", totalTime: 100, totalScore: 100 },
            { id: 5, source: "线性代数练习", description: "线性代数章节练习测试卷", examDate: "2023-11-05 15:00:00", totalTime: 60, totalScore: 100 },
            { id: 6, source: "计算机组成原理", description: "计算机组成原理单元测试", examDate: "2023-11-01 10:30:00", totalTime: 80, totalScore: 100 }
        ];

        // 当前分页参数
        var pagination = {
            current: 1,
            size: 6,
            total: examData.length
        };

        // 初始化页面
        function initPage() {
            // 模拟加载延迟
            setTimeout(function() {
                renderExamList();
                renderPagination();
                $('#loadingOverlay').hide();
            }, 800);
        }

        // 渲染试卷列表
        function renderExamList() {
            var start = (pagination.current - 1) * pagination.size;
            var end = Math.min(start + pagination.size, pagination.total);
            var currentData = examData.slice(start, end);

            var html = '';
            currentData.forEach(function(item) {
                html += `
            <li class="item">
                <h4 onclick="toExamMsg(${item.id})">${item.source}</h4>
                <p class="name">${item.source}-${item.description}</p>
                <div class="info">
                    <span><i class="layui-icon layui-icon-date"></i>${item.examDate.substr(0,10)}</span>
                    <span><i class="iconfont icon-icon-time"></i>限时${item.totalTime}分钟</span>
                    <span><i class="iconfont icon-fenshu"></i>满分${item.totalScore}分</span>
                </div>
            </li>
            `;
            });

            $('#paperList').html(html);
        }

        // 渲染分页组件
        function renderPagination() {
            laypage.render({
                elem: 'pagination',
                count: pagination.total,
                limit: pagination.size,
                curr: pagination.current,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                limits: [6, 10, 20, 40],
                jump: function(obj, first) {
                    if (!first) {
                        pagination.current = obj.curr;
                        pagination.size = obj.limit;
                        showLoading();
                        setTimeout(function() {
                            renderExamList();
                            hideLoading();
                        }, 500);
                    }
                }
            });
        }

        // 显示加载状态
        function showLoading() {
            $('#loadingOverlay').show();
        }

        // 隐藏加载状态
        function hideLoading() {
            $('#loadingOverlay').hide();
        }

        // 搜索功能
        $('#searchBtn, #searchBtnMain').on('click', function() {
            var keyword = $('#searchInput').val().trim();
            if (keyword) {
                showLoading();
                setTimeout(function() {
                    // 在实际应用中这里应该是API请求
                    // 这里使用前端过滤模拟
                    var filteredData = examData.filter(function(item) {
                        return item.source.includes(keyword) ||
                            item.description.includes(keyword);
                    });

                    pagination.total = filteredData.length;
                    pagination.current = 1;

                    renderPagination();
                    renderExamList();
                    hideLoading();
                }, 600);
            }
        });

        // 按回车键搜索
        $('#searchInput').on('keypress', function(e) {
            if (e.which === 13) {
                $('#searchBtn').click();
            }
        });

        // 初始化页面
        initPage();
    });

    // 跳转到试卷详情页
    function toExamMsg(examId) {
        // 在实际应用中这里应该跳转到详情页
        layer.msg('即将跳转到试卷ID: ' + examId + ' 的详情页面', {icon: 1});
        console.log('跳转到试卷详情页，试卷ID:', examId);

        // 实际跳转代码示例
        // window.location.href = '/examMsg?examCode=' + examId;
    }
</script>
</body>
</html>